<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.dev.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
    <style>* {
        margin: 0px;
        border: 0px;
        padding: 0px;
        font-size: 16px;
        color: white;
    }

    body {
        overflow: hidden;
    }

    .label, .txt, .btn {
        padding: 5px;
    }

    .w80 {
        width: 80%;
    }

    .w10 {
        width: 10%;
    }

    .w100 {
        width: 100%;
    }

    .h100 {
        height: 100%;
    }

    .h90 {
        height: 90%;
    }

    .h10 {
        height: 10%;
    }

    .w5 {
        width: 5%;
    }

    .h10 {
        height: 10%;
    }

    .os {
        overflow: scroll;
    }

    .fl {
        float: left;
    }

    .cb {
        clear: both;
    }

    .pf {
        position: fixed;
    }

    .pa {
        position: absolute;
    }

    a {
        text-decoration: none;
    }

    .dib {
        display: inline-block;
    }

    .db {
        display: block;
    }

    .dn {
        display: none;
    }

    #mnuBtn {
        border-left: 1px solid white;
    }

    /*灰黑色*/
    .colorb {
        background: rgb(23, 44, 60);
    }

    /*灰蓝色*/
    .colorg {
        background: rgb(39, 72, 98);
    }

    /*砖红色*/
    .colorr {
        background: rgb(153, 80, 84);
    }

    /*橘红色*/
    .coloro {
        background: rgb(217, 104, 49);
    }

    /*淡黄色*/
    .colory {
        background: rgb(230, 179, 61);
    }

    .tab {
        left: 0px;
        top: 25px;
        padding: 5px;
    }

    #menuTab {
        bottom: 10%;
        right: 0px;
        width: 20%;
        height: 90%;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
    }

    #menuTab > ul {
        height: 25px;
    }

    #menuTab > ul > li {
        height: 100%;
        width: 33%;
        text-align: center;
        line-height: 25px;
        border-left: 1px solid white;
        border-bottom: 1px solid white;
    }

    #menuTab > ul > li:first-child {
        border-left: none;
    }

    ul li {
        list-style: none;
    }</style>
    <link type="text/css" rel="stylesheet" href="chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/content.css">
</head>
<body>
<form>
    <div class="pf coloro" id="menuTab">
        <ul class="w100">
            <li class="fl"><input class="w100 btn h100 coloro colory" id="rolBtn" type="button" value="个人信息"></li>
            <li class="fl"><input class="w100 btn h100 coloro" id="linBtn" type="button" value="在线信息"></li>
            <li class="fl"><input class="w100 btn h100 coloro" id="romBtn" type="button" value="房间信息"></li>
        </ul>
        <div class="w100 coloro" id="tabContent">
            <div class="tab pa" id="roleInfo">
                <input class="txt coloro" id="nikInp" type="text"
                       placeholder="请在这里输入昵称">
                <input class="txt coloro" id="romInp"
                       type="text" placeholder="请在这里输入房间号">
            </div>
            <div class="tab pa dn" id="onlineInfo">
                <ul></ul>
            </div>
            <div class="tab pa w100 dn" id="roomInfo">
                <ul></ul>
            </div>
        </div>
    </div>
    <div class="h90 os colorb" id="msgBox">

    </div>
    <div class="h10"><input class="w80 txt h100 colorg" id="msgInp" type="text">
        <input class="w10 btn h100 colorr"
               id="subBtn" type="button"
               value="发送信息">
        <input
                class="w10 btn h100 colorr" id="mnuBtn" type="button" value="菜单">
        <script>var msgBox = $('#msgBox')[0];
        var msgInp = $('#msgInp')[0];
        var subBtn = $('#subBtn')[0];
        var mnuBtn = $('#mnuBtn')[0];

        var rolBtn = $('#rolBtn')[0];
        var linBtn = $('#linBtn')[0];
        var romBtn = $('#romBtn')[0];

        var nikInp = $('#nikInp')[0];
        var romInp = $('#romInp')[0];

        var tempRoleInfo = getRoleInfo();
        var socket = io.connect("ws://localhost:3000");

        //接受消息
        socket.on('message', function (data) {
            appendMsgBox(data);
        });

        //刷新在线信息
        socket.on('refreshNicks', function (data) {
            refreshOnline(data);
        });

        //刷新房间信息
        socket.on('refreshRooms', function (data) {
            refreshRooms(data);
        });

        //发送消息
        function sendMsg() {
            var msg = msgInp.value.trim();
            if (msg.length === 0) {
                return;
            }

            if (tempRoleInfo.nick.length === 0 || tempRoleInfo.room.length === 0) {
                return;
            }

            var message = tempRoleInfo.nick + '>>' + msg;
            tempRoleInfo.message = message;
            appendMsgBox(message);
            socket.emit('message', tempRoleInfo);
            msgInp.value = '';
        }

        //修改昵称
        nikInp.addEventListener('change', function (event) {
            var roleInfo = getRoleInfo();
            if (roleInfo.nick.length === 0 || roleInfo.room.length === 0) {
                return;
            }

            roleInfo.nickOld = tempRoleInfo.nick;
            roleInfo.nickNew = roleInfo.nick;
            socket.emit('changeNick', roleInfo)
            tempRoleInfo = getRoleInfo();
        });

        //修改房间
        romInp.addEventListener('change', function (event) {
            var roleInfo = getRoleInfo();
            if (roleInfo.nick.length === 0 || roleInfo.room.length === 0) {
                return;
            }

            msgBox.innerHTML = '';
            socket.emit('leaveRoom', tempRoleInfo)
            socket.emit('joinRoom', roleInfo)
            tempRoleInfo = getRoleInfo();
        });

        //获取当前的个人信息（昵称和房间号）
        function getRoleInfo() {
            var nick = nikInp.value.trim();
            var room = romInp.value.trim();
            return {nick: nick, room: room};
        }

        //显示新的消息
        function appendMsgBox(message) {
            var msg = document.createElement('p');
            msg.innerText = message;
            msgBox.appendChild(msg);
            msg.scrollIntoView();
        }

        //刷新在线一览
        function refreshOnline(nicks) {
            var onlineInfoUl = $('#onlineInfo>ul')[0];
            onlineInfoUl.innerHTML = '';
            for (var i = 0; i < nicks.length; i++) {
                addLi(onlineInfoUl, nicks[i]);
            }
        }

        //刷新房间一览
        function refreshRooms(rooms) {
            var roomInfoUl = $('#roomInfo>ul')[0];
            roomInfoUl.innerHTML = '';
            for (var i = 0; i < rooms.length; i++) {
                addLi(roomInfoUl, rooms[i]);
            }
        }

        //向列表中添加元素
        function addLi(ul, text) {
            var li = document.createElement('li');
            li.innerText = text;
            ul.appendChild(li);
        }

        //点击发送消息按钮，发送消息
        subBtn.addEventListener('click', function (event) {
            event.preventDefault();
            sendMsg();
        });

        //Enter键发送信息
        window.addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                sendMsg();
            }
        });

        //鼠标点击消息显示区域，则隐藏菜单栏
        msgBox.addEventListener('click', function (event) {
            menuVisible = false;
            hideMenu();
        });

        //点击菜单按钮，切换菜单栏显示状态
        var menuVisible = true;
        mnuBtn.addEventListener('click', function (event) {
            if (menuVisible) {
                hideMenu();
            } else {
                showMenu();
            }
            menuVisible = !menuVisible;
        });

        //默认Tab页为个人信息
        rolBtn.classList.add('colory');

        //点击个人信息按钮，显示个人信息
        rolBtn.addEventListener('click', function (event) {
            showRoleTab();
            hideOnlineTab();
            hideRoomTab();
            rolBtn.classList.add('colory');
            linBtn.classList.remove('colory');
            romBtn.classList.remove('colory');
        });

        //点击在线信息按钮，显示在线信息
        linBtn.addEventListener('click', function (event) {
            hideRoleTab();
            showOnlineTab();
            hideRoomTab();
            rolBtn.classList.remove('colory');
            linBtn.classList.add('colory');
            romBtn.classList.remove('colory');
        });

        //点击房间信息按钮，显示房间信息
        romBtn.addEventListener('click', function (event) {
            hideRoleTab();
            hideOnlineTab();
            showRoomTab();
            rolBtn.classList.remove('colory');
            linBtn.classList.remove('colory');
            romBtn.classList.add('colory');
        });

        //显示个人信息
        function showRoleTab() {
            var roleTab = $('#roleInfo')[0];
            roleTab.classList.remove('dn');
        }

        //隐藏个人信息
        function hideRoleTab() {
            var roleTab = $('#roleInfo')[0];
            roleTab.classList.add('dn');
        }

        //显示在线信息
        function showOnlineTab() {
            var onlineTab = $('#onlineInfo')[0];
            onlineTab.classList.remove('dn');
        }

        //隐藏在线信息
        function hideOnlineTab() {
            var onlineTab = $('#onlineInfo')[0];
            onlineTab.classList.add('dn');
        }

        //显示房间信息
        function showRoomTab() {
            var roomTab = $('#roomInfo')[0];
            roomTab.classList.remove('dn');
        }

        //隐藏房间信息
        function hideRoomTab() {
            var roomTab = $('#roomInfo')[0];
            roomTab.classList.add('dn');
        }

        //显示菜单
        function showMenu() {
            var menuTab = $('#menuTab')[0];
            menuTab.classList.remove('dn');
        }

        //隐藏菜单
        function hideMenu() {
            var menuTab = $('#menuTab')[0];
            menuTab.classList.add('dn');
        }
        </script>
    </div>
</form>
</body>
</html>